import React from 'react';
import Item from './Item';
import { Icon, Popover, Spin } from 'antd';
import { observer } from 'mobx-react';
import { WeaInput, WeaLocaleProvider } from 'ecCom';
import MyProgress from './MyProgress';
import BoardStore from '../../stores/board/BoardStore';
import { computed } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Column extends React.Component<{ boardStore: BoardStore, element: any }, any>{
    isShow = false;//是否依然显示
    constructor(props) {
        super(props);
        this.state = { btnVisible: false, changeGroupVisible: false, isEdit: false, title: this.getData.title, loading: false };
    }

    @computed
    get getData() {
        const { boardStore: { datas }, element } = this.props;
        return datas[element]
    }

    componentDidMount() {
        //新增Column元素，当前元素渲染到页面上后将元素添加到muuri
        const { boardStore } = this.props;
        const id = this.getData.id;
        if (id.endsWith('_new')) {
            const element: any = document.getElementById('column_' + id);
            let column = boardStore.boardGrid.add([element], { index: boardStore.boardGrid._items.length - 2 });
            boardStore.initItem(column[0]._element.querySelector('.board-column-content'));
        }
        //div滚动加载
        let divscroll: any = document.getElementById("board-column-content-scroll" + id);
        divscroll.onscroll = () => {
            var wholeHeight = divscroll.scrollHeight;
            var scrollTop = divscroll.scrollTop;
            var divHeight = divscroll.clientHeight;
            if (scrollTop + divHeight >= wholeHeight) {
                if (boardStore.changePage(id)) {
                    this.setState({ loading: true });
                    setTimeout(() => {
                        this.setState({ loading: false });
                    }, 500);
                }
            }
        }
    }

    //设置的每页显示数不够一页显示，鼠标移动上去自动加载下一页
    divScroll = () => {
        const { boardStore } = this.props;
        const id = this.getData.id;
        let divscroll: any = document.getElementById("board-column-content-scroll" + id);
        var wholeHeight = divscroll.scrollHeight;
        var scrollTop = divscroll.scrollTop;
        var divHeight = divscroll.clientHeight;
        if (scrollTop + divHeight >= wholeHeight) {
            if (boardStore.changePage(id)) {
                this.setState({ loading: true });
                setTimeout(() => {
                    this.setState({ loading: false });
                    this.divScroll();
                }, 500);
            }
        }
    }



    doMouseOver = (e) => {
        e.target.style.backgroundColor = 'rgb(222, 240, 255)';
    }

    doMouseOut = (e) => {
        e.target.style.backgroundColor = '';
    }

    movePoverVisibleChange = visible => {
        if (!visible && !this.isShow) {
            this.setState({ changeGroupVisible: visible, btnVisible: false });
        } else {
            this.setState({ changeGroupVisible: visible });
        }
    }

    getBtn = () => {
        const { boardStore } = this.props;
        const data = this.getData;
        let btn: any = [];
        const divStyle = { padding: '3px 10px 3px 10px', cursor: 'pointer' }
        if (boardStore.canAdd) {
            btn.push(<div onMouseOver={(e) => { this.doMouseOver(e); this.isShow = true; }} onMouseOut={this.doMouseOut} onClick={() => { boardStore.addItem(data); this.setState({ btnVisible: false }); }} style={divStyle}>{getLabel(389167, "添加新数据")}</div>);
        }
        if (boardStore.hasRight && boardStore.boardGrid && boardStore.datas) {
            let items = boardStore.boardGrid.getItems();
            let groups: any = [];
            for (let i = 0; i < items.length - 1; i++) {
                let groupid = items[i]._element.getAttribute('id').replace('column_', '');
                let groupname = boardStore.datas[groupid] ? boardStore.datas[groupid].title : '';
                groups.push({ groupid, groupname });
            }
            if (groups.length > 0) {
                btn.push(<div onMouseOver={(e) => { this.doMouseOver(e); this.isShow = true; }} onMouseOut={this.doMouseOut} onClick={() => {
                    this.setState({ btnVisible: false });
                }}>
                    <Popover overlayClassName="cubeBoardPopover1" placement="rightTop"
                        content={<div style={{ lineHeight: '25px' }}>
                            {groups.map(item => {
                                if (item.groupid != data.id) {
                                    return <div onMouseOver={this.doMouseOver} onMouseOut={this.doMouseOut} onClick={() => { boardStore.changeGroup(data.id, item.groupid, data.title, item.groupname); this.setState({ btnVisible: false, changeGroupVisible: false }); }} style={divStyle}>{item.groupname}</div>
                                }
                            })}
                        </div>}
                        trigger="hover"
                        visible={this.state.changeGroupVisible}
                        onVisibleChange={this.movePoverVisibleChange}
                    >
                        <div style={divStyle}>{getLabel(389168, "移动列表数据到")}<Icon style={{ float: 'right', cursor: 'pointer', marginTop: '5px' }} type="caret-right" theme="outlined" /></div>
                    </Popover>
                </div>);
            }
        }
        if (data.id != 'ungrouped' && boardStore.hasRight && boardStore.defaultTabSet != "2") {
            btn.push(<div onMouseOver={(e) => { this.doMouseOver(e); this.isShow = true; }} onMouseOut={this.doMouseOut} onClick={() => { boardStore.removeColumn(data.id); this.setState({ btnVisible: false }); }} style={divStyle}>{getLabel(130629, "删除分组")}</div>);
            btn.push(<div onClick={() => {
                this.setState({ isEdit: true, btnVisible: false });
            }} onMouseOver={(e) => { this.doMouseOver(e); this.isShow = true; }} onMouseOut={this.doMouseOut} style={divStyle}>{getLabel(83149, "编辑分组")}</div>);
        }
        return btn;
    }

    colors = ['#22D7BB', '#FED47B', '#F44336', '#9C27B0', '#3F51B5', '#2196F3', '#00BCD4', '#8BC34A', '#FFEB3B', '#FF9800', '#795548', '#CDDC39', '#009688'];

    componentDidUpdate() {
        if (this.refs.editTitle) {
            this.refs.editTitle['refs'].inputNormal.refs.input.refs.input.focus();
        }
    }

    render() {
        this.isShow = false;
        const { boardStore } = this.props;
        const data = this.getData;
        const { status } = data;
        let counts: any = []
        let progress = boardStore.statusList.map(item => {
            counts.push(status[item]);
            if (data.itemCount && data.itemCount != 0) {
                return status[item] / data.itemCount * 100;
            } else {
                return 0;
            }
        });
        const btn = this.getBtn();
        return <div id={"column_" + data.id} className="board-column muuri-item muuri-item-shown">
            <div className="board-column-header" style={((boardStore.hasRight && data.id != 'ungrouped') && boardStore.defaultTabSet != "2") ? { cursor: 'move' } : {}}>
                <div style={{ padding: '15px 10px 5px 10px' }}>
                    {!this.state.isEdit ? <span onDoubleClick={() => { if (data.id == 'ungrouped' || !boardStore.hasRight || boardStore.defaultTabSet == "2") return; this.setState({ isEdit: true }); }}>{data.title}</span> : <WeaInput
                        style={{ width: 80, cursor: 'pointer' }}
                        value={this.state.title}
                        ref="editTitle"
                        onBlur={() => {
                            this.setState({ isEdit: false });
                            if (this.state.title != data.title) {
                                boardStore.updateGroupName(data.id, this.state.title);
                                data.title = this.state.title;
                            }
                        }}
                        onChange={value => {
                            this.setState({ title: value });
                        }}
                    />}&nbsp;&nbsp;
                    {boardStore.defaultTabSet == "2" ?
                        <span style={{ color: '#f00' }}>
                            {counts.map((item, index) => {
                                return <span title={boardStore.allStatusMap[boardStore.statusList[index]]}>{item}</span>
                            })}
                            <span title="全部">{data && data.itemCount && '(' + data.itemCount + ')' || '(0)'}</span>
                        </span>
                        : <span style={{ color: '#BDC0CB' }}>
                            {counts.map((item, index) => {
                                return <span><span title={boardStore.allStatusMap[boardStore.statusList[index]]} style={{ color: this.colors[index] }}>{item}</span>/</span>
                            })}
                            <span title="全部">{data && data.itemCount && data.itemCount || 0}</span>
                        </span>}
                    {btn.length > 0 && <Popover overlayClassName="cubeBoardPopover" placement="bottomRight"
                        content={<div style={{ lineHeight: '25px' }}>{btn}</div>}
                        trigger="hover"
                        visible={this.state.btnVisible}
                        onVisibleChange={this.btnsPoverVisisbleChange}
                    >
                        <Icon style={{ float: 'right', cursor: 'pointer' }} type="ellipsis" />
                    </Popover>}

                </div>
                {boardStore.defaultTabSet != "2" && <div style={{ padding: '0px 10px 10px 10px' }}>
                    <MyProgress statusList={boardStore.statusList} allStatusMap={boardStore.allStatusMap} datas={progress} colors={this.colors} />
                </div>}
            </div>
            <div onMouseEnter={() => { boardStore.isScroll = true; this.divScroll() }} onMouseLeave={() => boardStore.isScroll = false} id={"board-column-content-scroll" + data.id} style={boardStore.isScroll ? { 'maxHeight': (boardStore.windowHeight - 190) + "px", display: 'block', overflow: 'auto' } : { 'maxHeight': (boardStore.windowHeight - 190) + "px", display: 'block', overflow: 'hidden' }}>
                <div id={"column_content_" + data.id} className="board-column-content muuri">
                    {data.itemIdList && data.itemIdList.map(element => {
                        return <Item key={boardStore.timestamp + "" + element} data={data.item[element]} hasRight={boardStore.hasRight} columnGrid={boardStore.columnGrids_map["column_content_" + data.id]} isTitle={boardStore.isTitle} store={boardStore} />
                    })}
                </div>
                <div style={{ textAlign: "center" }}><Spin spinning={this.state.loading} /></div>
            </div>
            {boardStore.canAdd && <div style={{ height: '40px', padding: '10px 0px 0px 10px', cursor: 'pointer' }} onClick={() => boardStore.addItem(data)}>
                <Icon type="plus" />&nbsp;{getLabel(389167, "添加新数据")}
            </div>}
        </div>
    }

    btnsPoverVisisbleChange = visible => {
        if (this.state.changeGroupVisible) {
            this.setState({ btnVisible: true });
        } else {
            this.setState({ btnVisible: visible });
        }
    }
}